<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 400px;
				height: 400px;
				margin: 100px auto;
				background:url(7.jpg) no-repeat -140px -140px;
				position: relative; 
				overflow: hidden;	
				animation: play 2s both ease infinite;    
/*				transform: skewX(30deg)  skewY(30deg);*/
			}
			.zhe{
				width: 400px;
				height: 400px;
				background: rgba(0,0,0,0.5);
				position: absolute;
				left: 0;
				top: 0;
				line-height: 400px;
				text-align: center;
				transform: skew(90deg);
				transition: all 2s;
				color: #fff;
				font-size: 21px;
			}
			#box:hover .zhe{
				transform: skew(0deg);
			}
			/*div:hover{
				transform: rotate(360deg);
			}
			@keyframes move{
				0%{transform: rotate(0deg);}
				100%{transform: rotate(360deg);}
			}*/
			@keyframes play{
				0%{transform: translateX(0px);}
				50%{transform: translateX(300px);}
				100%{transform: translateX(0px);}
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="zhe">晁然</div>
		</div>
	</body>
</html>
